<template>
	<view>
		<video src="https://images-1258438502.cos.ap-shanghai.myqcloud.com/file/login.mp4" autoplay loop object-fit="cover" muted :controls="false"
		:show-progress="false" :enable-progress-gesture="false" class="es-login__video"></video>
			
		<view class="es-custom-bar" :style="{height:customBar+'px'}">
			<view class="es-custom-bar__back" :style="{marginTop:statusBar+'px'}" @tap="navigateBack">
				<text class="esfont es-custom-bar__back__icon">&#xe6be;</text>
			</view>
		</view>
		
		<view class="es-login-wrapper">
			<!-- #ifdef MP-WEIXIN -->
			<view class="es-login-weixin">
				<text class="esfont es-login-weixin__icon">&#xe6b1;</text>
				<text class="es-login-weixin__text">微信登录</text>
				<button  class="es-login-button" open-type="getUserInfo" @getuserinfo="doLogin('weapp')"></button>
			</view>
			<!-- #endif -->
			<!-- #ifdef APP -->
			<view class="es-login-weixin" @tap="doLogin('weixin')">
				<text class="esfont es-login-weixin__icon">&#xe6b1;</text>
				<text class="es-login-weixin__text">微信登录</text>
			</view>
			<!-- #endif -->
			<view class="es-login-phone" @click="toPhoneLogin('phone')">
				<text class="esfont es-login-phone__icon">&#xe6ef;</text>
				<text class="es-login-phone__text">手机登录</text>
			</view>
			<view class="es-login-other">
				<view class="flex-center" v-if="!showLoginType">
					<text class="es-login-other__text" @tap="showLoginType = true">其他登录方式</text>
					<text class="esfont es-login-other__arrow">&#xe6d5;</text>
				</view>
				<view class="es-login-type" :style="{height:showLoginType?'100rpx':'0'}">
					<!-- 苹果登录 -->
					<view class="es-login-type__item" @tap="doLogin('apple')">
						<text class="es-login-type__item__icon esfont">&#xe6e2;</text>
					</view>
					<!-- qq登录 -->
					<view class="es-login-type__item" @tap="doLogin('qq')">
						<text class="es-login-type__item__icon esfont">&#xe6b3;</text>
					</view>
					<!-- 密码登录 -->
					<view class="es-login-type__item" @tap="toPhoneLogin('password')">
						<text class="es-login-type__item__icon esfont">&#xe665;</text>
					</view>
				</view>
			</view>
			<!-- 用户隐私与协议 -->
			<es-agreement ref="agreement" :checked="checked" :showDialog="showDialog" :loginType="loginType"
				userHref="http://www.esionet.com" privacyHref="http://www.esionet.com" juniorHref="http://www.esionet.com"
				@href="tapHref"	@confirm="onConfirm" @change="onChangeCheck"></es-agreement>

		</view>

	</view>

</template>

<script>
	import login from './login.js';
	import esAgreement from '/components/es-agreement/es-agreement';
	export default {
		components:{
			esAgreement
		},
		data() {
			return {
				checked: false,
				showDialog: false,
				loginType: "",
				customBar: 0,
				statusbar: 0,
				bottomHeight: 0,
				showLoginType: false,
				loading: false
			}
		},
		created() {
			uni.getSystemInfo({
				success: e => {
					this.bottomHeight = e.screenHeight - e.safeArea.bottom;
					this.statusBar = e.statusBarHeight;
					if (e.platform == 'android') {
						this.customBar = e.statusBarHeight + 50
					} else {
						this.customBar = e.statusBarHeight + 45
					}
				}
			});
		},
		watch: {
			loading() {
				if (this.loading) {
					uni.showLoading();
				} else {
					uni.hideLoading();
				}
			}
		},
		methods: {
			loginSuccess(res){
				uni.showToast({
					title:"登录成功"
				})
			},
			tapHref(e){
				uni.showToast({
					icon:"none",
					title:e.title+'-'+e.href
				})
			},
			onConfirm(loginType) {
				this.checked = true;
				this.doLogin(loginType);
			},
			doLogin(loginType) {
				this.loginType = loginType;
				//是否已同意隐私政策与协议
				if (!this.checked && !this.$refs.agreement.showDialog) {
					this.$refs.agreement.showDialog = true;
					return;
				}
				
				if (loginType == "weapp") {
					this.weappLogin();
				} else if (loginType == "weixin") {
					this.wxLogin();
				} else if (loginType == "apple") {
					// #ifdef MP-WEIXIN
					uni.showToast({
						icon:"none",
						title:"请在APP中使用"
					})
					return;
					// #endif
					this.appleLogin();
				} else if (loginType == "qq") {
					// #ifdef MP-WEIXIN
					uni.showToast({
						icon:"none",
						title:"请在APP中使用"
					})
					return;
					// #endif
					this.qqLogin();
				}
			},
			//小程序登录
			weappLogin() {
				if (this.loading) {
					return;
				}
				this.loading = true;
				//此处直接返回登录成功，请修改login.js中的接口请求方法
				login.weappLogin().then(res => {
					//微信登录成功
					this.loginSuccess(res)
				}).catch(res => {
					uni.showToast({
						icon:"none",
						title:res
					})
				}).finally(() => {
					this.loading = false;
					this.$refs.agreement.showDialog = false;
				});
			
			},
			//app-微信登录
			wxLogin() {
				if (this.loading) {
					return;
				}
				this.loading = true;
				//此处直接返回登录成功，请修改login.js中的接口请求方法
				login.wxLogin().then(res => {
					//微信登录成功
					this.loginSuccess(res)
				}).catch(res => {
					uni.showToast({
						icon:"none",
						title:res
					})
				}).finally(() => {
					this.loading = false;
					this.$refs.agreement.showDialog = false;
				});

			},
			//app-苹果登录
			appleLogin() {
				if (this.loading) {
					return;
				}
				this.loading = true;
				//此处直接返回登录成功，请修改login.js中的接口请求方法
				login.appleLogin().then(res => {
					//苹果账号登录成功
					this.loginSuccess(res)
				}).catch(res => {
					uni.showToast({
						icon:"none",
						title:res
					})
				}).finally(() => {
					this.loading = false;
					this.$refs.agreement.showDialog = false;
				});
			},
			//app-qq登录
			qqLogin() {
				if (this.loading) {
					return;
				}
				this.loading = true;
				//此处直接返回登录成功，请修改login.js中的接口请求方法
				login.qqLogin().then(res => {
					//qq账号登录成功
					this.loginSuccess(res)
				}).catch(res => {
					uni.showToast({
						icon:"none",
						title:res
					})
				}).finally(() => {
					this.loading = false;
					this.$refs.agreement.showDialog = false;
				});
			},
			onChangeCheck(checked) {
				this.checked = checked;
			},
			toPhoneLogin(loginType) {
				uni.navigateTo({
					url: "/pages/template/login/phone-login?loginType=" + loginType
				})
			},
			navigateBack() {
				let pages = getCurrentPages();
				if(pages.length == 1){
					uni.switchTab({
						url:"/pages/index/index"
					})
				}else{
					uni.navigateBack()
				}
			}
		}
	}
</script>

<style>
	.flex-center{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.es-login__video {
		width: 750rpx;
		height:100vh;
		position: fixed;
		top: 0;
		left: 0;
	}
	
	.es-custom-bar {
		position: fixed;
		top: 0;
		left: 0;
		width: 750rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		z-index: 10;
	}
	
	.es-custom-bar__back {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 68rpx;
		height: 68rpx;
		background: rgba(0, 0, 0, 0.3);
		border-radius: 50%;
		margin-left: 30rpx
	}
	
	.es-custom-bar__back__icon {
		font-size: 30rpx;
		color: #ffffff;
	}
	
	.es-login-wrapper {
		width: 750rpx;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		background-color: rgba(0, 0, 0, 0.3);
	}
	
	.es-login-weixin {
		width: 550rpx;
		height: 96rpx;
		background: #FFFFFF;
		border-radius: 48rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		position: relative;
	}
	
	.es-login-button{
		width: 550rpx;
		height: 96rpx;
		border-radius: 48rpx;
		background-color: transparent;
		position: absolute;
		top: 0;
		left: 0;
	}
	
	.es-login-weixin__icon {
		font-size: 40rpx;
		color: #0DAD00;
		margin-right: 10rpx;
	}
	
	.es-login-weixin__text {
		font-weight: 500;
		font-size: 28rpx;
		color: #1E1E1E;
	}
	
	.es-login-phone {
		width: 550rpx;
		height: 96rpx;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 48rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin-top: 35rpx;
	}
	
	.es-login-phone__icon {
		font-size: 36rpx;
		color: #ffffff;
		margin-right: 10rpx;
	}
	
	.es-login-phone__text {
		font-weight: 500;
		font-size: 28rpx;
		color: #ffffff;
	}
	
	.es-login-other {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 60rpx;
		height: 200rpx;
	}
	
	.es-login-other__text {
		font-size: 26rpx;
		line-height: 26rpx;
		color: #FFFFFF;
	}
	
	.es-login-other__arrow {
		font-size: 16rpx;
		line-height: 16rpx;
		color: #FFFFFF;
		margin-left: 5rpx;
	}
	
	.es-login-type {
		width: 500rpx;
		overflow: hidden;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		transition-property: height;
		transition-duration: 0.3s;
		transition-timing-function: ease-in;
		transition-delay: 0;
	}
	
	.es-login-type__item {
		width: 100rpx;
		height: 100rpx;
		box-sizing: border-box;
		border: 2rpx solid #FFFFFF;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.es-login-type__item__icon {
		font-size: 50rpx;
		color: #ffffff;
	}

</style>